<template>
	<section>
		<el-col :span="24" class="box">
			<el-col :span="24" class="box-header">用餐申请详情</el-col>
			<el-form :model="mngtDetailForm" label-width="120px" class="detail-form">
				<el-form-item label="申请类型：">
					<el-col :span="6">{{mngtDetailForm.Category}}</el-col>
					<el-col :span="3" class="label-txt">申请对象：</el-col>
					<el-col :span="5">{{mngtDetailForm.Dept}} - {{mngtDetailForm.Applicant}}</el-col>
					<!--<el-col :span="3" class="label-txt">申请人电话：</el-col>-->
					<!--<el-col :span="6">{{mngtDetailForm.Mobile}}</el-col>-->
					<el-col :span="3" class="label-txt">来访单位：</el-col>
					<el-col :span="6">{{mngtDetailForm.VisitorDept}}</el-col>
				</el-form-item>

				<!--<el-form-item label="来访人员：">-->
					<!--<el-col :span="6">-->
						<!--<el-tag type="primary" v-for="item in mngtDetailForm.VisitorNames" class="m-r-2">{{item}}</el-tag>-->
					<!--</el-col>-->
					<!--<el-col :span="3" class="label-txt">人员级别：</el-col>-->
					<!--<el-col :span="5">{{mngtDetailForm.VisitorLevel}}</el-col>-->
					<!--<el-col :span="3" class="label-txt">来访单位：</el-col>-->
					<!--<el-col :span="6">{{mngtDetailForm.VisitorDept}}</el-col>-->
				<!--</el-form-item>-->

				<el-form-item label="就餐日期 ：">
					<el-col :span="6">{{mngtDetailForm.VisitDate | moment}} {{mngtDetailForm.MealType}}</el-col>
					<el-col :span="3" class="label-txt">就餐人数：</el-col>
					<el-col :span="5">{{mngtDetailForm.MealNum}}人</el-col>
					<el-col :span="3" class="label-txt">来访事由：</el-col>
					<el-col :span="6">{{mngtDetailForm.Reason}}</el-col>
				</el-form-item>

				<el-form-item label="申请状态 ：">
					<el-col :span="6">{{mngtDetailForm.Status}}</el-col>
				</el-form-item>
				
				<block v-show="mngtDetailForm.Status!='待审核'">
					<el-col class="line b-b line-lg pull-in"></el-col>
					<el-form-item label="用餐标准： ">
						<el-col :span="6">{{mngtDetailForm.Price}}元</el-col>
					    <el-col :span="3" class="label-txt" >用餐地点：</el-col>
					    <el-col :span="5">{{mngtDetailForm.Room}}</el-col>
					</el-form-item>

					<el-form-item label="审核备注： " v-show="mngtDetailForm.ApprovedComments">
						<el-col>{{mngtDetailForm.ApprovedComments}}</el-col>
					</el-form-item>
					
					<el-form-item label="合并用餐： " v-show="meals.length > 0">
						<el-col :span="21" class="meals-list">
							<el-table :data="meals" border class="meals-table">
								<el-table-column label="申请人" min-width="170">
									<template scope="scope">
										<p>{{scope.row.Applicant}}</p>
									</template>
								</el-table-column>
								<el-table-column prop="Dept" label="申请部门" min-width="140">
								</el-table-column>
								<!--<el-table-column prop="VisitorNames" label="来访人员" width="219" :formatter="fnVisitorFormat">-->
								<!--</el-table-column>-->
								<!--<el-table-column prop="VisitorLevel" label="来访级别" width="90">-->
								<!--</el-table-column>-->
								<el-table-column prop="MealNum" label="用餐人数" min-width="90">
								</el-table-column>
								<el-table-column prop="Status" label="状态" min-width="80">
								</el-table-column>
							</el-table>
					    </el-col>
					</el-form-item>
					
					<el-form-item>
						<el-button type="primary" @click.native="fnSignoff" v-if="IsLogistics && mngtDetailForm.Status =='待签收'">签收</el-button>
						<el-button type="danger" @click.native="fnPrint" v-if="(!IsLogistics && mngtDetailForm.Status =='待签收' || mngtDetailForm.Status =='已签收') || (mngtDetailForm.EmployeeID === EmpID && mngtDetailForm.Status =='待签收'  || mngtDetailForm.Status =='已签收')">打印</el-button>
						<el-button v-if="!pageType" @click.native="emitGoBack">返回</el-button>
						<el-button v-else @click.native="emitGoBackPage(pageType)">返回</el-button>
					</el-form-item>
				</block>
			</el-form>
			
			<el-col class="line b-b line-lg pull-in" v-show="mngtDetailForm.Status=='待审核'"></el-col>
			
			<el-form v-show="mngtDetailForm.Status=='待审核'" ref="approveInfoForm" :model="approveInfoForm" :rules="approveInfoRules" label-width="120px" class="detail-form">
				<!--<block v-show="mngtDetailForm.EmployeeID != EmpID">-->
				<block v-show="IsApprover">
					<el-form-item label="用餐标准： " required>
					    <el-col :span="5 ">
							<el-select v-model="approveInfoForm.Prices" placeholder="请选择 ">
								<el-option v-for="item in prices" :key="item" :label="item + '元'" :value="item">
								</el-option>
							</el-select>
					    </el-col>
					    <el-col class="label-txt" :span="4"><span style="color: red;">*</span>用餐地点：</el-col>
					    <el-col :span="4">
							<el-select v-model="approveInfoForm.Room" placeholder="请选择 " @change="fnChangeRoom">
								<el-option v-for="item in rooms" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
					    </el-col>
					</el-form-item>
					
					<el-form-item v-show="hasMealList">
						<el-col :span="21" class="meals-list">
							<p class="meals-head">{{approveInfoForm.Room}}同时段申请情况：</p>
							<el-table :data="meals" border class="meals-table">
								<el-table-column label="申请人" min-width="170">
									<template scope="scope">
										<p>{{scope.row.Applicant}}</p>
									</template>
								</el-table-column>
								<el-table-column prop="Dept" label="申请部门" min-width="140">
								</el-table-column>
								<!--<el-table-column prop="VisitorNames" label="来访人员" width="219" :formatter="fnVisitorFormat">-->
								<!--</el-table-column>-->
								<!--<el-table-column prop="VisitorLevel" label="来访级别" width="90">-->
								<!--</el-table-column>-->
								<el-table-column prop="MealNum" label="用餐人数" width="180">
								</el-table-column>
								<el-table-column prop="Status" label="状态" width="120">
								</el-table-column>
							</el-table>
					    </el-col>
					</el-form-item>
					
					<el-form-item label="审核备注： ">
						<el-col :span="21">
							<el-input type="textarea" :rows="2" placeholder="请填写审核备注 " v-model="approveInfoForm.Comments">
							</el-input>
						</el-col>
					</el-form-item>
					
					<el-form-item>
						<el-button type="primary" @click.native="fnApprovePass" v-if="hasApprovePass">通过</el-button>
						<el-button type="primary" @click.native="fnCombinedMeals" v-else>合并用餐</el-button>
						<el-button type="danger" @click.native="fnApproveNoPass" v-show="mngtDetailForm.Category == '标准'">驳回</el-button>
						<el-button @click.native="emitGoBack">返回</el-button>
					</el-form-item>
				</block>
				
				<!--<block v-show="mngtDetailForm.EmployeeID == EmpID">-->
				<block v-show="!IsApprover">
					<el-form-item>
						<el-button v-if="!pageType" @click.native="emitGoBack">返回</el-button>
						<el-button v-else @click.native="emitGoBackPage(pageType)">返回</el-button>
					</el-form-item>
				</block>
			</el-form>
		</el-col>
		
		<!--操作日志-->
		<el-col class="log-header">操作日志</el-col>
		<el-table :data="logs" border v-loading="logsLoading" class="log-list">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="Remark" label="日志内容 " min-width="300">
			</el-table-column>
			<el-table-column prop="Createdby" label="创建者 " width="120">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="创建时间 " width="200" :formatter="fnDateFormat ">
			</el-table-column>
		</el-table>
	</section>
</template>

<script>
	import Svc from '../../../service/index.js'
	export default {
		props:['task-id','apply-id','page-type','is-processed'],
		data() {
			return {
				EmpID:'',
				EmpName:'',
				Dept:'',
                IsApprover:false,//是否为审核人员
				IsLogistics : false, //是否为后勤人员
				rooms:[],//所有餐厅
				prices:[],//所有餐费
				hasMealList : false,//当前时间段内该餐厅是否被占用
				meals : [], //冲突的申请内容
				//当前用餐申请的内容
				mngtDetailForm:{},
				//提交审核的内容
				approveInfoForm : {
					Room:'',
					Prices:6,
					MealType : '',//用餐类型
//					MealTime:'',//用餐时段
//					TimeStart:0,//用餐开始时间
//					TimeEnd:0,//用餐结束时间
					Comments:''
				},
				hasApprovePass : true, //判断是合并用餐还是正常提交
				logs:[]//操作日志
 			}
		},
		methods: {
			//自定义事件->跳转到用餐列表组件
			emitGoBack(){
				this.$emit('go-back',this.isProcessed)
			},
			emitGoBackPage(url){
				this.$emit('go-back-page',url)
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //时间格式化  
            fnDateFormat:function(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == undefined) {  
	             	return " ";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD HH:mm:ss ");  
            },
            //格式化->来访人员
            fnVisitorFormat(row, column){
            	var list = row[column.property] || [];
            	var res = ''
            	for (var i=0;i<list.length;i++) {
            		if (i == list.length-1) {
            			res += list[i]
            			continue
            		}
            		res += list[i] + "、"
            	}
            	return res
            },
			//获取当前记录的内容
			fnCurrentMeal(){
				var that = this
	            Svc.fnGetData('/api/meal/detail/'+that.applyId,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.mngtDetailForm = res.body.Data
	            		that.approveInfoForm.Room = res.body.Data.Room
                        that.approveInfoForm.Prices = res.body.Data.Price
	            		that.approveInfoForm.MealType = res.body.Data.MealType
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//获取所有餐厅及餐费
			fnGetRoomAndPrices(){
				var that = this
	            Svc.fnGetData('/api/dataconfig',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.rooms = res.body.Data.Room
	            		that.prices = res.body.Data.MealPrice
	            	} else {
	            		that.openMessage("当前用餐申请获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//将时间转换为分钟数
			fnDataToMinute(time){
				var moment = require('moment');
				var list = time.split(':')
				return parseInt(list[0])*60 + parseInt(list[1])
			},
			//验证餐厅是否被占用
			fnCheckMealRoom(){
				var that = this
				var moment = require('moment');
				var params = {
					ID : that.mngtDetailForm.ID,
					Date:moment(that.mngtDetailForm.VisitDate).format('YYYY-MM-DD'),
					Room:that.approveInfoForm.Room,
					MealType : 0
				}
				
				//判断用餐类型的值
				if (that.approveInfoForm.MealType == "早餐") {
					params.MealType = 0
				} else if (that.approveInfoForm.MealType == "午餐") {
					params.MealType = 1
				} else if (that.approveInfoForm.MealType == "晚餐") {
					params.MealType = 2
				}
				
	            Svc.fnPostData('/api/meal/check',params,function(res){
            		if (res.body.ErrCode == 0) {
            			if (res.body.Data) {
	            			that.hasMealList = true
	            			that.meals = res.body.Data
	            			that.hasApprovePass = false
	            		} else {
	            			that.hasMealList = false
	            			that.hasApprovePass = true
	            		}
            		}
	            })
			},
			//修改用餐地点
			fnChangeRoom(){
				this.fnCheckMealRoom()
			},
			//审核操作
			fnApprove(isPass,mergeIds){
				var that = this
				var params = {
				    TaskID : that.taskId,
				    ApplyID : that.applyId,
				    Price :  that.approveInfoForm.Prices,
				    Room :  that.approveInfoForm.Room,
					Comments : that.approveInfoForm.Comments,
					IsPass : isPass,
					ApproverEmpID : that.EmpID,
					ApproverName : that.EmpName,
					MergeIDs : mergeIds
				}
				
				Svc.fnPostData('/api/meal/approve',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage('审核操作成功！','success')
	            		setTimeout(function () {
	            			that.$emit('go-back')
			          	},1500);
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//通过审核
			fnApprovePass(){
				var that = this
				var moment = require('moment');
				that.$refs.approveInfoForm.validate((valid) => {
					if (valid) {
						that.$confirm('您确认要通过本条用餐申请吗?', '提示', {
							type: 'warning'
						}).then(function(){
							that.fnApprove(true,[])
						})
					} else {
		            	return false
		          	}
				})
			},
			//驳回审核
			fnApproveNoPass(){
				var that = this
				that.$confirm('您确认要驳回本条用餐申请吗?', '提示', {
					type: 'warning'
				}).then(function(){
					that.fnApprove(false,[])
				})
			},
			//合并用餐
			fnCombinedMeals(){
				var that = this
				that.$confirm('您确认要合并用餐吗?', '提示', {
					type: 'warning'
				}).then(function(){
					//冲突的申请ID
					var mergeIds = []
					for (var i=0;i<that.meals.length;i++) {
						mergeIds.push(that.meals[i].ID)
					}
					that.fnApprove(true,mergeIds)
				})
			},
			//签收操作
			fnSignoff(){
				var that = this
				var params = {
				    TaskID : that.taskId,
				    ApplyID : that.applyId,
					EmpID : that.EmpID,
					EmpName : that.EmpName,
					Dept : that.Dept
				}
				
				that.$confirm('您确认要签收本条用餐申请吗?', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/meal/signoff',params,function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage('签收操作成功！','success')
		            		setTimeout(function () {
		            			that.$router.push({ path: that.pageType });
				          	},1500);
		            	} else {
		            		that.openMessage(res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！ ",'error')
		            })
				})
			},
			//获取操作记录
			fnGetLogs(){
				var that = this
				Svc.fnGetData('/api/log/meal/' + that.applyId + '/' + 20 + '/' + 0,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.logs = res.body.Data
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//获取登录人信息
			fnGetUserInfo(){
				var user = sessionStorage.getItem('user');
				if (user) {
					user = JSON.parse(user);
					this.EmpID = user.EmployeeID || '';
					this.EmpName = user.Name || '';
					this.Dept = user.Dept || '';
					this.IsLogistics = user.IsLogistics;
					this.IsApprover = user.IsApprover
				}
			},
			//打印
            fnPrint(){
				window.open('/api/meal/print/'+this.applyId)
			}
		},
		mounted() {
			//获取登录人信息
			this.fnGetUserInfo()
			//获取所有餐厅及餐费
			this.fnGetRoomAndPrices()
			//获取当前记录的内容
			this.fnCurrentMeal()
			//获取操作记录
			this.fnGetLogs()
		}
	}
</script>

<style scoped>
	.m-r-2{
		margin-right: 2px;
	}

	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}

	.detail-form {
		margin:20px;
		width:95%;
		min-width:600px;
	}
	
	.label-txt {
		color: #48576a;
	    text-align: right;
    	margin-right: 10px;
	}
	
	.log-header{
		margin: 40px 0 10px 0;
	    font-size: 15px;
	    font-weight: 600;
	}
	
	.log-list{
		width: 100%;
		margin-top: 20px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
	}
	
	/*分割线 start*/
	.line {
	    height: 2px;
	    font-size: 0;
	    overflow: hidden;
	}
	.b-b {
	    border-bottom: 1px dashed #ddd;
	}
	.line-lg {
	    margin-bottom: 20px;
	}
	/*分割线 end*/
	
	.meals-list p{
		margin: 0;
	    height: 25px;
    	line-height: 25px;
	    color: #48576a;
	}
	
	.meals-head{
		font-size: 13px;
		font-weight: 500;
	}
	
	.meals-table {
		font-size: 13px;
	}
</style>